/**
 * 收费报表
 * @constructor
 */
function FeeReport() {
}

FeeReport.init = function () {
    // //日期区间选择
    //年月选择器
    laydate.render({
        elem: '#start_yearmonth',
        theme: 'molv',
        type: 'month'
    });
    laydate.render({
        elem: '#end_yearmonth',
        theme: 'molv',
        type: 'month'
    });

    getfeeType();
    //设置列
    var tablecolumns=[];
    tablecolumns.push({
        //field: 'Number',//可不加
        title: '序号',//标题  可不加
        align: "center",
        width: 40,
        formatter: function (value, row, index) {
            var pageSize=$('#tableList').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
            var pageNumber=$('#tableList').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
            return pageSize * (pageNumber - 1) + index + 1;//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
        },
        footerFormatter: function(){
            return "统计";
        }
    });
    tablecolumns.push({ field: 'shopName', title: '商户名称',align: 'center'});
    tablecolumns.push({ field: 'feeYearMonth', title: '月份',align: 'center'});
    $.each(feetypedata, function (i, val) { //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
        tablecolumns.push({
            title: val.name,
            align: 'center',
            formatter: function (value, row, index) {
                var optionHtml = "";
                $.each(row.feeList, function (index, vallist) { //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
                    if(val.name==vallist.feeType)
                    {
                        optionHtml = vallist.amount;
                    }
                });
                return optionHtml;

            }
        });
    });
    tablecolumns.push({ field: 'amount', title: '合计',align: 'center'});


    $('#tableList').bootstrapTable({
        url: '/fee/tableSearch',
        method: 'post',
        striped : true, //是否显示行间隔色
        toolbar: "#toolbar",
        sidePagination: "true",
        dataField: "data",//这是返回的json数组的key.默认是"rows".这里只有前后端约定好就行
        showToggle : false, //是否显示详细视图和列表视图的切换按钮
        striped: true, // 是否显示行间隔色
        //search : "true",
        uniqueId: "id",
        pageList : [ 5, 10, 20,50,100],//可选择单页记录数
        pageSize: "10",
        pagination: true, // 是否分页
        sortable: false, // 是否启用排序
        sidePagination: 'server', // 设置为服务器端分页     客户端：client
        search:false,
        showColumns: false,
        showRefresh: false,
        showFooter:false,
        //得到查询的参数
        queryParams: function (params) {
            //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            var query_params = {
                //********table的参数 不变
                pageSize: params.limit,                         //页面大小
                pageIndex: (params.offset / params.limit) + 1,   //页码
                sort: params.sort,      //排序列名
                sortOrder: params.order, //排位命令（desc，asc）
                //********
                //获取查询的对象，往下加入
                name: $('#search_Name').val(), // 请求时向服务端传递的参数
                state: $('#search_State').val(),
                startMonth : $('#start_yearmonth').val(),
                endMonth : $('#end_yearmonth').val()
            };
            return query_params;
        },
        columns:tablecolumns
    });
    getEchartMap();
}
//查询方法****************************
function doSearch() {
    // $('#tableList').bootstrapTable(('refresh')); // 很重要的一步，刷新url！
    $("#tableList").bootstrapTable("refreshOptions",{pageNumber:1});
    getEchartMap();
}

//动态设置收费类别****************************
function getfeeType() {
    $("#divform").html("");
    var html="";
    $.ajax({
        url:"/feetype/getFeeType",
        type:"get",
        //data:JSON.stringify(postdata),
        contentType:"application/json",
        dataType:"json",
        async: false, // 同步
        success:function(data) {
            console.log(data);
            feetypedata=data;
            $.each(data, function (i, val) { //两个参数，第一个参数表示遍历的数组的下标，第二个参数表示下标对应的值
                html="";
                html=html+"<div class=\"row\">";
                html=html+"<label class=\"col-lg-2 control-label\">"+val.name+"</label>";
                html=html+"<div class=\"col-lg-10\">";
                html=html+"<div class=\"form-group\">";
                html=html+" <input type=\"text\" id=\""+val.name+"\" name=\""+val.name+"\" placeholder=\""+val.name+"\" autocomplete=\"off\" class=\"form-control\" maxlength=\"10\" />";
                html=html+"</div>";
                html=html+"</div>";
                html=html+"</div>";
                $("#divform").append(html);
            });


        }
    });
}
//画图****************

function getEchartMap()
{
    var myChart = echarts.init(document.getElementById('container'));
    var startmonth = $('#start_yearmonth').val();
    var endmonth = $('#end_yearmonth').val();
    var postdata={
        startmonth:startmonth,
        endmonth:endmonth,
    };
    $.ajax({
        url:"/fee/getFeeListMap",
        type:"post",
        data:JSON.stringify(postdata),
        contentType:"application/json",
        dataType:"json",
        async: false, // 同步
        success:function(data) {
            console.log("data.typenames:",data.typenames);
            console.log("data.shopnames:",data.shopnames);
            Maps(data,myChart);
        }
    });



}
function Maps(mapdata,myChart) {
   var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: mapdata.typenames
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: mapdata.shopnames
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series:mapdata.series
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option, true); //如果不设置TRUE就不能动态加载图
    window.onresize = myChart.resize;


}

//*****************************************************************************************
